<template>
<div :class="[$style.container]">
  <div :class="[$style.body]">
    <div :class="[$style.banner]">
      <el-avatar :size="36" src="/logo.png"></el-avatar>
      <span class="ml-3 ft-32 text-heading">玖钉文档系统</span>
    </div>
    <div :class="[$style.content]">
      <el-form label-position="top" :model="form" :rules="rules" ref="fm">
        <el-form-item prop="accessCode" label="请输入提取码:">
          <el-input v-model="form.accessCode" maxlength="4"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" style="width: 100%;" :loading="submitting" @click="onSubmit">提取文档</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</div>
</template>

<script lang="ts">
import { ElForm } from 'element-ui/types/form'
import { Vue, Component, Prop, Ref } from 'vue-property-decorator'
import { checkAccessCode } from '@/api/doc-share'

@Component
export default class AccessPage extends Vue {
  @Prop() data!: any

  @Ref() fm!: ElForm

  form = {
    accessCode: ''
  }

  rules = {
    accessCode: [
      { required: true, message: '请输入提取码' }
    ]
  }

  submitting = false

  onSubmit () {
    this.fm.validate().then((valid) => {
      if (!valid) return
      this.submitting = true
      const accessCode = this.form.accessCode
      checkAccessCode(this.data?.id, accessCode).then(data => {
        if (data) {
          location.replace(`/s/${this.data?.id}?accessCode=${accessCode}`)
        } else {
          this.$message.error('提取码错误')
        }
      }).finally(() => {
        this.submitting = false
      })
    })
  }
}
</script>

<style lang="scss" module>
@import "~@/styles/vars.scss";

.container {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: $bg-body-color;
}

.body {
  width: 480px;
}

.banner {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
}

.content {
  background: #fff;
  min-height: 80px;
  border-radius: 4px;
  box-shadow: 0 0 10px rgba(171, 198, 235, .3);
  padding: 20px;
}
</style>
